<template>
<div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
            <!-- <input placeholder="请输入手机号" class="input"><input placeholder="密码" class="input" type="password"> -->

            <!-- 当成标签属性传给子组件 -->
            <hmInput ref="username" placeholder="请输入手机号" v-model="user.username" :reg ="/^1[3,4,5,6,7,8,9]\d{9}$/"></hmInput> 
            <!-- 组件的特性：
            自定义组件的属性会自动成为组件内根标签的属性 （props中的属性除外） 
                 v-model作用：
                 1、把表单元素的value属性和变量双向绑定
                 2、能够自动监听表单元素的Input属性，并且会自动将该事件传递过来的输入框的值
            -->
             <hmInput ref="password" placeholder="请输入密码" v-model="user.password" :reg="/^.{3,16}$/" type="password"></hmInput>
            </div>
        <p class="tips">
            没有账号？
            <a href="#/register" class="">去注册</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
         <van-button icon="star-o" round type="danger" block @click="loginFn">登录按钮</van-button>
    </div>
</div>
</template>

<script>
 import{login} from "@/api/user.js"
export default{ 
 data(){
     return {
         user:{
             username: "",
             password:""
         }
     }
 },
 methods:{
        loginFn(){
            // 1.判断用户输入内容是否合法
            // 获取到输入框组件内的isOk来进行判断
            let {username,password} =this.$refs
            if(username.isOk === false){
                return this.$toast.fail("手机号码不正确！")
            }
            if(password.isOk === false){
                return this.$toast.fail("密码必须3到16位")
            }
            
            // 2、添加loading效果  在登录前添加
            this.$toast.loading({
                message:'加载中···',
                forbidClick:true,
                duration:0  //值为0 表示toast不会消失
            })
            // 3、调用登录接口
            login(this.user).then(res=>{
                console.log(54,res);
            })
            // 4、关闭loading效果  请求完成后
            this.$toast.clear()
            // 5、
        } 
     }
}
</script>

<style lang="less">
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360 )* 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>